<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { Search } from "@element-plus/icons-vue";
import lodash from "lodash";
import api from "@/api";

import thumb1Icon from "@/assets/images/bim/roamthumb1.png";
import thumb2Icon from "@/assets/images/bim/roamthumb2.png";
import thumb3Icon from "@/assets/images/bim/roamthumb3.png";

const roam = reactive({
    list: [],
    cacheList: [
        {
            label: "地库仿真模拟漫游-1",
            description: '--',
            imgUrl: thumb1Icon,
            videoUrl: 'https://inview.oss-cn-shanghai.aliyuncs.com/suhexi/others/%E5%9C%B0%E5%BA%93%E4%BB%BF%E7%9C%9F%E6%A8%A1%E6%8B%9F%E6%BC%AB%E6%B8%B8-1.mp4'
        },
        {
            label: "地库仿真模拟漫游-2",
            description: '--',
            imgUrl: thumb2Icon,
            videoUrl: 'https://inview.oss-cn-shanghai.aliyuncs.com/suhexi/others/%E5%9C%B0%E5%BA%93%E4%BB%BF%E7%9C%9F%E6%A8%A1%E6%8B%9F%E6%BC%AB%E6%B8%B8-2.mp4'
        },
        {
            label: "地库仿真模拟漫游-3",
            description: '--',
            imgUrl: thumb3Icon,
            videoUrl: 'https://inview.oss-cn-shanghai.aliyuncs.com/suhexi/others/%E5%9C%B0%E5%BA%93%E4%BB%BF%E7%9C%9F%E6%A8%A1%E6%8B%9F%E6%BC%AB%E6%B8%B8-3.mp4'
        }
    ],

    keywords: "",
    curIndex: -1,
    statisticUrl: "",
    Detail: `地库仿真模拟漫游是通过虚拟现实技术让用户在模拟的地下停车场环境中进行漫游和探索。
    在地库仿真模拟漫游中，可以身临其境地体验一个真实的地下停车场场景，包括停车位、走廊、楼梯等，
    可探索和发现地下停车场中的各种设施和特点，观察停车位的数量和位置，了解地下停车场的结构和布局。`,
    curVideoUrl: "",
});

// api.robot.getRobotInfos().then((res) => {
//     roam.statisticUrl = res.statisticUrl;
//     roam.cacheList = res.data;

//     roam.list = lodash.cloneDeep(roam.cacheList);
//     if (res.data && res.data.length > 0) {
//         roam.Detail = res.data[0].detail;
//         roam.curVideoUrl = res.data[0].videoUrl;
//         roam.curIndex = 0;
//     }
// });

roam.list = lodash.cloneDeep(roam.cacheList);
roam.curVideoUrl = roam.list[0].videoUrl;
roam.curIndex = 0;

onMounted(() => { });

const handleClick = (item, index) => {
    if (roam.curIndex == index) return;
    roam.curIndex = index;
    // roam.Detail = item.detail;
    roam.curVideoUrl = item.videoUrl;
};

//筛选
const searchHandleClick = function () {
    if (roam.keywords === "") {
        roam.list = lodash.cloneDeep(roam.cacheList);
    } else {
        roam.list = [];
        roam.cacheList.forEach((item) => {
            if (item.label.indexOf(roam.keywords) !== -1) {
                roam.list.push(item);
            }
        });
    }

    if (roam.list.length > 0) {
        // roam.Detail = roam.list[0].detail;
        roam.curIndex = 0;
        roam.curVideoUrl = roam.list[0].videoUrl;
    }
};
</script>

<template>
    <div class="robotContainer">
        <div class="d-l">
            <div class="searchPanel">
                <el-input v-model="roam.keywords" placeholder="请输入关键词" size="small">
                    <template #append><el-button @click="searchHandleClick" :icon="Search"></el-button></template>
                </el-input><br />
                <img src="@/assets/images/ibe/total.png" style="width: 20px" />
                <span><span class="total">共计</span><span class="colorText">{{ roam.list.length }}</span>个</span>
            </div>
            <div class="listContainer">
                <ul>
                    <li v-for="(item, index) in roam.list" :key="index">
                        <div :class="[
                            'listItem',
                            roam.curIndex == index ? 'activeItem' : '',
                        ]" @click="handleClick(item, index)">
                            <div class="thumb">
                                <el-image crossorigin="anonymous" style="width: 70px; height: 50px" :src="item.imgUrl"
                                    fit="fill" />
                            </div>
                            <div class="info">
                                <span class="titleSpan">{{ item.label }}</span><br />
                                <div class="description">{{ item.description }}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="d-r">
            <div class="deviceVideo">
                <video crossorigin="anonymous" :src="roam.curVideoUrl" controls loop muted>
                </video>
            </div>
            <div class="deviceTable">
                <div class="title">
                    <span>产品优势</span>
                </div>
                <div class="info">
                    <span>{{ roam.Detail }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.robotContainer {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100vh - 80px);
    font-family: SourceHanSansSC;
    color: #656565;
    overflow-x: hidden;
    overflow-y: auto;

    .d-l {
        width: 23%;
        height: calc(100vh - 85px);
        min-height: 835px;
        margin-left: 8px;
        border: 1px solid #dce3ef;
        box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
        border-radius: 6px;

        .searchPanel {
            margin-top: 15px;
            margin-bottom: 10px;
            padding-left: 20px;

            .total {
                padding: 0px 5px;
            }

            :deep .el-input {
                width: 80%;
            }

            .colorText {
                font-size: 30px;
                font-family: Source Han Sans SC;
                font-weight: 500;
                color: #4095ff;
                padding-right: 5px;
            }
        }

        .listContainer {
            height: calc(100vh - 200px);
            min-height: 730px;
            overflow-y: auto;
            overflow-x: hidden;

            .listItem {
                width: 95%;
                height: 88px;
                margin: 0 auto;
                margin-bottom: 10px;
                border-bottom: 1px solid #dce3ef;
                box-sizing: border-box;
                display: flex;
                align-items: center;

                .thumb {
                    width: 87px;
                    margin-right: 10px;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    text-align: center;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .info {
                    width: 280px;

                    .titleSpan {
                        font-size: 16px;
                        font-family: Source Han Sans SC;
                        font-weight: 500;
                        color: #424242;
                        line-height: 25px;
                        font-weight: bold;
                    }

                    .description {
                        width: 100%;
                        height: 40px;
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                    }
                }
            }

            .activeItem {
                background-color: #e8e9fb;
            }
        }

        .deviceMaintain {
            width: 100%;
            height: 648px;
            border: 1px solid #dce3ef;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("@/assets/images/ibe/deviceMatain.png");
        }
    }

    .d-r {
        width: 75%;
        margin-left: 16px;
        height: calc(100vh - 95px);

        .deviceVideo {
            width: 100%;
            height: 580px;
            border: 1px solid #dce3ef;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;
            margin-bottom: 8px;

            video {
                width: 100%;
                height: 100%;
                object-fit: fill;
            }
        }

        .deviceTable {
            width: 100%;
            //height: 254px;
            height: 245px;
            border: 1px solid #dce3ef;
            box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
            border-radius: 6px;

            .info {
                padding: 0 20px;
                font-size: 14px;
                font-family: Source Han Sans SC;
                font-weight: 500;
                color: #656565;
                line-height: 33px;
                font-weight: bold;
            }
        }
    }

    .modalDevice {
        position: absolute;
        top: 15%;
        left: 15%;
        background-color: white;
    }
}

.title {
    width: 100px;
    height: 20px;
    border-left: 3px #8f93f7 solid;
    font-weight: bold;
    padding-left: 10px;
    margin: 15px;
}

#deviceChart {
    width: 100%;
    max-width: 441px;
    height: 335px;
}
</style>